﻿<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Bery-Real Estate Listing Template</title>
    <meta name="AdsBot-Google" content="noindex follow" />
    <meta name="description" content="Bery-Real Estate Listing Template">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.png" />

    <!-- CSS (Font, Vendor, Icon, Plugins & Style CSS files) -->

    <!--  <link rel="stylesheet" href="/static/css/vendor/icofont.min.css" />
  <link rel="stylesheet" href="/static/css/vendor/line-awesome.min.css"/>
  <link rel="stylesheet" href="/static/css/vendor/simple-line-icons.css"/> -->
    <!-- Font CSS -->
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

    <!-- Vendor CSS (Bootstrap & Icon Font) -->

    <!-- Plugins CSS (All Plugins Files) -->

<!--    <link rel="stylesheet" href="/static/css/plugins/swiper-bundle.min.css" />-->

<!--    <link rel="stylesheet" href="/static/css/plugins/magnific-popup.css" />-->


    <!-- Style CSS -->
    <link rel="stylesheet" href="/static/css/style.css" />

</head>


<body class="font-ubuntu text-body text-tiny">
    <div class="overflow-x-hidden">
        <!-- header top start -->
        <div class="bg-primary font-recoleta text-white py-[11px]">
            <div class="container">
                <div class="grid items-center grid-cols-12 gap-x-[30px]">
                    <div class="col-span-12 sm:col-span-6 text-center sm:text-left">
                        <p>Have a question? <a class="hover:text-secondary" href="">+9985 254 784</a></p>
                    </div>
                    <div class="col-span-12 sm:col-span-6 text-center sm:text-right">
                        <p>Visit us: 9am to 10 pm ( Mon - Fri)</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- header top end -->

        <!-- Header start -->

       <header id="sticky-header" class="relative bg-[#F5F9F8] lg:py-[30px] z-10 secondary-sticky secondary-sticky">
            <div class="container">
                <div class="grid grid-cols-12">
                    <div class="col-span-12">
                        <div class="flex flex-wrap items-center justify-between">
                            <a href="index.html" class="block">
                                <img class="w-full h-full" src="/static/images/logo/logo.svg" loading="lazy" width="99" height="46" alt="brand logo">
                            </a>
                            <nav class="flex flex-wrap items-center">
                                <ul class="hidden lg:flex flex-wrap items-center font-recoleta text-[16px] xl:text-[18px] leading-none text-black">
                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">

                                        <a href="#" class="transition-all hover:text-secondary">主页</a>

                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all
                group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100

                ">
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">Home
                                                    01</a>
                                            </li>
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index-2.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">Home
                                                    02</a>
                                            </li>
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index-3.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">Home
                                                    03</a>
                                            </li>
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index-4.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">Home
                                                    04</a>
                                            </li>
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index-5.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">Home
                                                    05</a>
                                            </li>
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index-6.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">Home
                                                    06</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">

                                        <a href="about.html" class="transition-all hover:text-secondary">关于我们</a>

                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all
            group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100

            ">
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="about.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">about 01</a>
                                            </li>

                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="about-v2.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">about 02</a>
                                            </li>
                                        </ul>

                                    </li>
                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">

                                        <a href="#" class="transition-all hover:text-secondary">房源</a>
                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all
            group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100

            ">
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="about.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">二手房购买</a>
                                            </li>

                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="about-v2.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">二手房租贷</a>
                                            </li>


<!--                                            <li class="mr-[70px]">-->
<!--                                                <ul>-->
<!--                                                    <li class="text-primary underline font-recoleta mb-[30px]">Properties</li>-->
<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-v1.html" class="font-recoleta text-[14px] hover:text-secondary">Properties v1</a>-->
<!--                                                    </li>-->
<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-v2.html" class="font-recoleta text-[14px] hover:text-secondary">Properties v2</a>-->
<!--                                                    </li>-->

<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="add-properties.html" class="font-recoleta text-[14px] hover:text-secondary">Add properties</a>-->
<!--                                                    </li>-->
<!--                                                </ul>-->
<!--                                            </li>-->

<!--                                            <li class="mr-[70px]">-->
<!--                                                <ul>-->
<!--                                                    <li class="text-primary underline font-recoleta mb-[30px]">Properties1 with sidebar</li>-->
<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-left-side-bar.html" class="font-recoleta text-[14px] hover:text-secondary">Properties left side bar</a>-->
<!--                                                    </li>-->
<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-right-side-bar.html" class="font-recoleta text-[14px] hover:text-secondary">Properties right side bar</a>-->
<!--                                                    </li>-->

<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-list-left-side-bar.html" class="font-recoleta text-[14px] hover:text-secondary">Properties list left side bar</a>-->
<!--                                                    </li>-->

<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-list-right-side-bar.html" class="font-recoleta text-[14px] hover:text-secondary">Properties list-->
<!--                                                            right side bar</a>-->
<!--                                                    </li>-->
<!--                                                </ul>-->
<!--                                            </li>-->


<!--                                            <li>-->
<!--                                                <ul>-->
<!--                                                    <li class="text-primary underline font-recoleta mb-[30px]">Property Details</li>-->
<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="add-properties.html" class="font-recoleta text-[14px] hover:text-secondary">Add properties</a>-->
<!--                                                    </li>-->

<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-details.html" class="font-recoleta text-[14px] hover:text-secondary">Properties details</a>-->
<!--                                                    </li>-->

<!--                                                </ul>-->
<!--                                            </li>-->

                                        </ul>
                                    </li>
                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">

                                        <a href="#" class="transition-all hover:text-secondary">公告信息</a>
<!--                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all-->
<!--            group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100-->
<!--            -->
<!--            ">-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="service.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">Service</a>-->
<!--                                            </li>-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="single-service.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">single service</a>-->
<!--                                            </li>-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="login.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">login</a>-->
<!--                                            </li>-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="register.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">register</a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </li>-->
<!--                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">-->

<!--                                        <a href="agency.html" class="transition-all hover:text-secondary">Agency</a>-->
<!--                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all-->
<!--            group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100-->
<!--            -->
<!--            ">-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="agency.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">agency</a>-->
<!--                                            </li>-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="create-agency.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">create-->
<!--                                                    agency</a>-->
<!--                                            </li>-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="agent.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">agent</a>-->
<!--                                            </li>-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="agency-details.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">agency-->
<!--                                                    details</a>-->
<!--                                            </li>-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="agent-details.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">agent-->
<!--                                                    details</a>-->
<!--                                            </li>-->

<!--                                        </ul>-->


<!--                                    </li>-->
<!--                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">-->

<!--                                        <a href="#" class="transition-all hover:text-secondary">Blog</a>-->
<!--                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all-->
<!--            group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100-->
<!--            -->
<!--            ">-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="blog-grid.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">blog-->
<!--                                                    grid</a>-->
<!--                                            </li>-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="blog-grid-left-side-bar.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">blog-->
<!--                                                    grid left side bar</a>-->
<!--                                            </li>-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="blog-grid-right-side-bar.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">blog-->
<!--                                                    grid right side bar</a>-->
<!--                                            </li>-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="blog-details.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">blog-->
<!--                                                    details</a>-->
<!--                                            </li>-->

<!--                                        </ul>-->

<!--                                    </li>-->
                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">

                                        <a href="contact-us.html" class="transition-all hover:text-secondary">联系我们</a>

                                    </li>
                                </ul>

                                <ul class="flex flex-wrap items-center">
                                    <li class="sm:mr-5 xl:mr-[20px] relative group"><a href="#">
                                            <img src="/static/images/user/avater.png" loading="lazy" width="62" height="62" alt="avater">
                                        </a>

                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[180px] absolute top-[120%] sm:left-1/2 sm:-translate-x-1/2 transition-all
                group-hover:top-[60px] invisible group-hover:visible opacity-0 group-hover:opacity-100 right-0

                ">
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="/login" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">登陆</a>
                                            </li>

                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="/register" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">注册</a>
                                            </li>


                                        </ul>
                                    </li>
                                    <li>
                                        <a href="add-properties.html" class="before:rounded-md before:block before:absolute before:left-auto before:right-0 before:inset-y-0 before:-z-[1] before:bg-secondary before:w-0 hover:before:w-full hover:before:left-0 hover:before:right-auto before:transition-all leading-none px-[20px] py-[15px] capitalize font-medium text-white hidden sm:block text-[14px] xl:text-[16px] relative after:block after:absolute after:inset-0 after:-z-[2] after:bg-primary after:rounded-md after:transition-all">Add
                                            Property</a>
                                    </li>
                                    <li class="ml-2 sm:ml-5 lg:hidden">
                                        <a href="#offcanvas-mobile-menu" class="offcanvas-toggle flex text-[#016450] hover:text-secondary">
                                            <svg width="24" height="24" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                                <path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z" />
                                            </svg>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- offcanvas-overlay start -->
        <div class="offcanvas-overlay hidden fixed inset-0 bg-black opacity-50 z-50"></div>
        <!-- offcanvas-overlay end -->
        <!-- offcanvas-mobile-menu start -->
        <div id="offcanvas-mobile-menu" class="offcanvas left-0 transform -translate-x-full fixed font-normal text-sm top-0 z-50 h-screen xs:w-[300px] lg:w-[380px] transition-all ease-in-out duration-300 bg-white">

            <div class="py-12 pr-5 h-[100vh] overflow-y-auto">
                <!-- close button start -->
                <button class="offcanvas-close text-primary text-[25px] w-10 h-10 absolute right-0 top-0 z-[1]" aria-label="offcanvas">x</button>
                <!-- close button end -->

                <!-- offcanvas-menu start -->

                <nav class="offcanvas-menu mr-[20px]">
                    <ul>
                        <li class="relative block border-b-primary border-b first:border-t first:border-t-primary">
                            <a href="#" class="block capitalize font-normal text-black hover:text-secondary text-base my-2 py-1 px-5">Home</a>
                            <ul class="offcanvas-submenu static top-auto hidden w-full visible opacity-100 capitalize">
                                <li><a class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary" href="index.html">home 01</a></li>
                                <li><a class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary" href="index-2.html">home 02</a></li>
                                <li><a class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary" href="index-3.html">home 03</a></li>
                                <li><a class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary" href="index-4.html">home 04</a></li>
                                <li><a class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary" href="index-5.html">home 05</a></li>
                                <li><a class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary" href="index-6.html">home 06</a></li>
                            </ul>
                        </li>
                        <li class="relative block border-b-primary border-b">
                            <a href="about.html" class="block capitalize font-normal text-black hover:text-secondary text-base my-2 py-1 px-5">About</a>
                            <ul class="offcanvas-submenu static top-auto hidden w-full visible opacity-100 capitalize">
                                <li><a class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary" href="about.html">About</a></li>

                                <li><a class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary" href="about-v2.html">About v2</a></li>
                            </ul>

                        </li>
                        <li class="relative block border-b-primary border-b">
                            <a href="#" class="block capitalize font-normal text-black hover:text-secondary text-base my-2 py-1 px-5">Properties</a>
                            <ul class="offcanvas-submenu static top-auto hidden w-full visible opacity-100 capitalize">
                                <li>
                                    <a class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary" href="#">Properties</a>
                                    <ul class="offcanvas-submenu static top-auto hidden w-full visible opacity-100 capitalize">



                                        <li>
                                            <a class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary" href="properties-v1.html"> properties v1</a>
                                        </li>
                                        <li>
                                            <a class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary" href="properties-v2.html"> properties v2</a>
                                        </li>
                                        <li>
                                            <a class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary" href="add-properties.html">add properties </a>
                                        </li>

                                    </ul>
                                </li>
                                <li>
                                    <a class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary" href="#">Properties with sidebar</a>
                                    <ul class="offcanvas-submenu static top-auto hidden w-full visible opacity-100 capitalize">

                                        <li>
                                            <a href="properties-left-side-bar.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">properties
                                                left side bar</a>
                                        </li>
                                        <li>
                                            <a href="properties-right-side-bar.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">properties
                                                right side bar</a>
                                        </li>

                                        <li>
                                            <a href="properties-list-left-side-bar.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">properties
                                                list left side bar</a>
                                        </li>

                                        <li>
                                            <a href="properties-list-right-side-bar.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">properties
                                                list
                                                right side bar</a>
                                        </li>
                                    </ul>


                                </li>
                                <li>
                                    <a class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary" href="#">Property Details</a>

                                    <ul class="offcanvas-submenu static top-auto hidden w-full visible opacity-100 capitalize">

                                        <li>
                                            <a href="add-properties.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">add
                                                properties</a>
                                        </li>

                                        <li>
                                            <a href="properties-details.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">properties
                                                details</a>
                                        </li>

                                    </ul>

                                </li>

                            </ul>
                        </li>
                        <li class="relative block border-b-primary border-b"><a href="#" class="relative block capitalize font-normal text-black hover:text-secondary text-base my-2 py-1 px-5">Pages</a>

                            <ul class="offcanvas-submenu static top-auto hidden w-full visible opacity-100 capitalize">
                                <li>
                                    <a href="service.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">Service</a>
                                </li>
                                <li>
                                    <a href="single-service.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">single
                                        service</a>
                                </li>
                                <li>
                                    <a href="contact-us.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">contact
                                        us</a>
                                </li>
                                <li>
                                    <a href="create-agency.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">create
                                        agency</a>
                                </li>
                                <li>
                                    <a href="login.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">login</a>
                                </li>
                                <li>
                                    <a href="register.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">register</a>
                                </li>
                            </ul>
                        </li>

                        <li class="relative block border-b-primary border-b"><a href="#" class="relative block capitalize font-normal text-black hover:text-secondary text-base my-2 py-1 px-5">agency</a>

                            <ul class="offcanvas-submenu static top-auto hidden w-full visible opacity-100 capitalize">
                                <li>
                                    <a href="agency.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">agency</a>
                                </li>
                                <li>
                                    <a href="create-agency.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">create
                                        agency</a>
                                </li>

                                <li>
                                    <a href="agent.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">agent</a>
                                </li>

                                <li>
                                    <a href="agency-details.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">agency
                                        details</a>
                                </li>

                                <li>
                                    <a href="agent-details.html" class="text-sm pt-3 px-10 pb-1 text-black font-light block transition-all hover:text-secondary">agent
                                        details</a>
                                </li>

                            </ul>

                        </li>

                        <li class="relative block border-b-primary border-b"><a href="#" class="relative block capitalize text-black hover:text-secondary text-base my-2 py-1 px-5">Blog</a>

                            <ul class="offcanvas-submenu static top-auto hidden w-full visible opacity-100 capitalize">
                                <li>
                                    <a href="blog-grid.html" class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary">blog
                                        grid</a>
                                </li>
                                <li>
                                    <a href="blog-grid-left-side-bar.html" class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary">blog
                                        grid left side bar</a>
                                </li>
                                <li>
                                    <a href="blog-grid-right-side-bar.html" class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary">blog
                                        grid right side bar</a>
                                </li>
                                <li>
                                    <a href="blog-details.html" class="text-sm py-2 px-[30px] text-black font-light block transition-all hover:text-secondary">blog
                                        details</a>
                                </li>

                            </ul>
                        </li>
                        <li class="relative block border-b-primary border-b"><a href="contact.html" class="relative block capitalize text-black hover:text-secondary text-base my-2 py-1 px-5">Contact</a></li>
                    </ul>
                </nav>
                <!-- offcanvas-menu end -->

                <div class="px-5 flex flex-wrap mt-3 sm:hidden">
                    <a href="#" class="before:rounded-md before:block before:absolute before:left-auto before:right-0 before:inset-y-0 before:-z-[1] before:bg-secondary before:w-0 hover:before:w-full hover:before:left-0 hover:before:right-auto before:transition-all leading-none px-[20px] py-[15px] capitalize font-medium text-white text-[14px] xl:text-[16px] relative after:block after:absolute after:inset-0 after:-z-[2] after:bg-primary after:rounded-md after:transition-all">Add
                        Property</a>
                </div>



            </div>
        </div>
        <!-- offcanvas-mobile-menu end -->
        <!-- Header end -->
        <!-- Hero section start -->

        <section class="bg-no-repeat bg-center bg-cover bg-[#FFF6F0] h-[350px] lg:h-[513px] xl:h-[650px] flex flex-wrap items-center relative before:absolute before:inset-0 before:content-[''] before:bg-[#000000] before:opacity-[70%]" style="background-image: url('/static/images/breadcrumb/bg-1.png');">
            <div class="container">
                <div class="grid grid-cols-12">
                    <div class="col-span-12">
                        <div class="max-w-[700px]  mx-auto text-center text-white relative z-[1]">
                            <div class="mb-5"><span class="text-base block">Login</span></div>
                            <h1 class="font-recoleta text-[32px] sm:text-[50px] md:text-[68px] lg:text-[50px] leading-tight xl:text-2xl">
                                登陆！
                            </h1>


                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Hero section end -->

        <!-- contact form start -->

        <div class="py-[80px] lg:py-[120px]">
            <div class="container">
                <form action="#">
                    <div class="grid grid-cols-12 gap-x-[30px] mb-[-30px]">
                        <div class="col-span-12 lg:col-span-6 mb-[30px]">
                            <h2 class="font-recoleta text-primary text-[24px] sm:text-[30px] leading-[1.277] xl:text-xl mb-[15px]">
                                Login to Bary<span class="text-secondary">.</span></h2>

                            <p class="max-w-[465px] mb-[50px]">
                                Huge number of propreties availabe here for buy, sell and Rent.
                                Also you find here co-living property, lots opportunity you have to
                                choose here and enjoy huge discount you can get.
                            </p>
                            <div class="grid grid-cols-12 gap-x-[20px] gap-y-[35px]">

                                <div class="col-span-12">
                                    <input class="font-light w-full sm:w-[400px] leading-[1.75] placeholder:opacity-100 placeholder:text-body border border-primary border-opacity-60 rounded-[8px] p-[15px] focus:border-[#FD6400] focus:border-opacity-60 focus:outline-none focus:drop-shadow-[0px_6px_15px_rgba(0,0,0,0.1)] " type="text" placeholder="Usename" id="username">
                                </div>


                                <div class="col-span-12">
                                    <input class="font-light w-full sm:w-[400px] leading-[1.75] placeholder:opacity-100 placeholder:text-body border border-primary border-opacity-60 rounded-[8px] p-[15px] focus:border-[#FD6400] focus:border-opacity-60 focus:outline-none focus:drop-shadow-[0px_6px_15px_rgba(0,0,0,0.1)] " type="password" placeholder="Password" id="password">

                                    <div class="flex flex-wrap items-center justify-between w-full sm:w-[400px] mt-[15px]">
                                        <div class="flex flex-wrap items-center">
                                            <input type="checkbox" id="checkbox1" name="Remember me">

                                        </div>
                                        <a href="#" class="hover:text-secondary text-[14px] block">忘记密码</a>
                                    </div>
                                </div>



                                <div class="col-span-12">
                                    <div class="flex flex-wrap items-center">
                                        <button type="submit" class="before:rounded-md before:block before:absolute before:left-auto before:right-0 before:inset-y-0 before:-z-[1] before:bg-secondary before:w-0 hover:before:w-full hover:before:left-0 hover:before:right-auto before:transition-all leading-none px-[40px] py-[15px] capitalize font-medium text-white text-[14px] xl:text-[16px] relative after:block after:absolute after:inset-0 after:-z-[2] after:bg-primary after:rounded-md after:transition-all" onclick="login()">Login</button>
                                        <a href="/register" class="font-medium text-primary hover:text-secondary ml-[40px]">没有账号？注册</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-span-12 lg:col-span-6 mb-[30px]">
                            <img src="/static/images/contact/image.png" class="w-full h-auto rounded-[10px]" width="546" height="478" alt="image">
                        </div>
                    </div>
                </form>

            </div>
        </div>

        <a id="scrollUp" class="w-12 h-12 rounded-full bg-primary text-white fixed right-5 bottom-16 flex flex-wrap items-center justify-center transition-all duration-300 z-10" href="#" aria-label="scroll up">

            <svg width="25" height="auto" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                <path d="M6.101 261.899L25.9 281.698c4.686 4.686 12.284 4.686 16.971 0L198 126.568V468c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12V126.568l155.13 155.13c4.686 4.686 12.284 4.686 16.971 0l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L232.485 35.515c-4.686-4.686-12.284-4.686-16.971 0L6.101 244.929c-4.687 4.686-4.687 12.284 0 16.97z" />
            </svg>

        </a>
    </div>


    <!-- JS Vendor, Plugins & Activation Script Files -->

    <!-- Vendors JS -->
    <script src="/static/js/vendor/modernizr-3.11.7.min.js"></script>
    <script src="/static/js/vendor/jquery-3.6.0.min.js"></script>
    <script src="/static/js/vendor/jquery-migrate-3.3.2.min.js"></script>
    <!-- Plugins JS -->
    <script src="/static/js/plugins/popper.min.js"></script>
    <script src="/static/js/plugins/jquery.magnific-popup.min.js"></script>
    <script src="/static/js/plugins/jquery.ajaxchimp.min.js"></script>
    <script src="/static/js/plugins/parallax.min.js"></script>
    <script src="/static/js/plugins/jquery.waypoints.js"></script>
    <script src="/static/js/plugins/jquery.counterup.min.js"></script>

    <!-- Activation JS -->
<!--    <script src="/static/js/main.js"></script>-->
    <script>
            function login() {
                var username = $("#username").val();
                var password = $("#password").val();
                var post_data = {"username": username, "password": password}

                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(post_data),
                    url: "http://127.0.0.1:8000/tokens/",
                    success: function(resp) {
                        if (resp.code == 200) {
                            // 将token保存到本地存储
                            // dnblog_token,其他页面有用到这个key，所以当前项目名字不能自定义
                            // dnblog_user
                            window.localStorage.setItem("dnblog_token", resp.data.token);
                            window.localStorage.setItem("dnblog_user", resp.username);
                            alert("登陆成功");
                            window.location.replace('http://127.0.0.1:5000/')
                        } else {
                            alert(resp.error);
                        }
                    }
                })
            }
        </script>

</body>

</html>
